<!-- 筛选demo -->
<template>
    <div class="header-bar-search">
        <!-- <historySearch @search="handSearch" v-if="historyComponents"></historySearch> -->
        <div class="header_search_bar clear" v-if="isShow">
            <!-- <div class="header_search_comback fl" @click="gotoback">
                <i class="iconfont icon-back_icon"></i>
            </div> -->
            <div class="header_search_center_search">              
                <span class="clear">
                    <i class="iconfont icon-sousuo fl"></i>
                    <input type="text" v-model="search" placeholder="搜索">
                    <i @click="clearClick" v-if="clearShow" class="iconfont icon-guanbi fr"></i>
                </span>
            </div>
            <div class="header_search_right fr">
                <button @click="handSearchbtn()">{{search_sousuo_btn}}</button>
            </div>
        </div>
        <div class="pagecontent" style="background-color:#fff;">
            <!-- 历史搜索 -->
            <!-- <div class="history_search" v-if="historyShow">
                <h3>历史搜索</h3>
                <ul>
                    <li v-for="(searchInput,ind) in searchs" :key="ind">
                        懒人沙发
                    </li>
                </ul>
            </div> -->
            <!-- 搜索结果 -->
            <div class="search_results">
                <!-- 导航 + 结果 -->
                <ul>
                    <li 
                        v-for="(searchNav, i) in searchNavs" 
                        :key="i"
                        @click="handClick(i)"
                        :class="{'active': navind === i}"
                    >{{searchNav.navText}}</li>
                </ul>
                <div >
                <!-- 导航下每个对应的内容遍历 -->
                    <div v-if="CompanyList == ''" class="contentEmpty" style="margin-top: 1.2rem;">
                        <img src="../common/images/Disappointment.png" alt="">
                        <em>暂无查询结果</em>
                    </div>
                    <div v-else>
                        <div class="association_lists_searchNav clear" v-for="list in CompanyList" :key="list.id" @click="indexJump(list.id,list.aa)">
                            <div class="association_left fl" style="margin: 0.23rem;">
                                <img :src="list.img" v-if="list.img" alt="">
                                <span class="img_info_one" v-else-if="list.c_logo">{{list.c_name.substring(0,1)}}</span>
                                <img src="../common/images/youquan.png" style="border-radius: 50%;" v-else />
                                <!-- <span class="img_info_one" :style="'background-color:' + list.bgcolor" v-else-if="list.c_logo">{{list.c_name.substring(0,1)}}</span> -->
                            </div>
                            <div class="association_desc fl" style="padding: 0.235rem;">
                                <h5>{{list.name}}</h5>
                                <p>{{list.desc}}</p>
                            </div>
                            <div class="btn_small_red fr" v-if="btnShow && navind == 1" style="padding-right: 0.2rem;margin-top: 0 !important;">
                                <button>查看</button>
                                <!-- <button v-if="list.showStatus == 0">加入</button>
                                <button v-if="list.showStatus == 1">查看</button>
                                <button v-if="list.showStatus == 2">沟通</button> -->
                                <!-- <button>关注</button> -->
                            </div>  
                        </div>                           
                    </div>

                </div>
                <!-- <ul>
                    <li v-for="(item,index) in items">
                        <span>{{item.name}}</span>
                        <span>{{item.msg}}</span>
                    </li>
                </ul> -->
            </div>
        </div>
    </div>
</template>


<script>
// import historySearch from '../../public/historySearch';
    export default {
        data() {
            return {
                search:'',
                isShow: true,                  //搜索结果隐藏
                // historyComponents: true,        //历史搜索结果显示
                resultShow: false,              //搜索结果为空
                headisShow: true,              //搜索结果头部
                clearShow: true,               //清除输入内容
                search_sousuo_btn: '取消',       //取消聚焦为“取消”
                // searchs: [{},{}],               //历史搜索结果   
                navind: 0,
                access_toke:'',
                userInfo:'',
                searchNavs: [           //导航
                    { navText: '圈子' },
                    { navText: '企业' },
                    { navText: '新闻' },
                    { navText: '商品' },
                    { navText: '活动' }
                ],
                userId:'',
                CompanyList:[],             //搜索结果的内容
                btnShow: false,
                // searchData: '',    //搜索结果为空
                // isFirstEnter:false // 是否第一次进入，默认false
            }
        },
        // beforeRouteEnter(to, from, next) {
        //     // 路由导航钩子，此时还不能获取组件实例 `this`，所以无法在data中定义变量（利用vm除外）
        //     // 参考 https://router.vuejs.org/zh-cn/advanced/navigation-guards.html
        //     // 所以，利用路由元信息中的meta字段设置变量，方便在各个位置获取。这就是为什么在meta中定义isBack
        //     // 参考 https://router.vuejs.org/zh-cn/advanced/meta.html
        //     if(from.name=='companyIndex'){
        //         console.log(from.name);
        //         to.meta.isBack=true;
        //         //判断是从哪个路由过来的，
        //         //如果是page2过来的，表明当前页面不需要刷新获取新数据，直接用之前缓存的数据即可
        //     }
        //     next();
        // },
        // activated() {
        //     if(!this.$route.meta.isBack || this.isFirstEnter){
        //         this.CompanyList = [];
        //         // 如果isBack是false，表明需要获取新数据，否则就不再请求，直接使用缓存的数据
        //         // this.handSearch();
        //     }
        //     // 恢复成默认的false，避免isBack一直是true，导致下次无法获取数据
        //     this.$route.meta.isBack=false;
        //     this.isFirstEnter=false;

        // },
         mounted() {
            let that = this;
            that.userInfo = window.localStorage.getItem('userInfo');
            that.userInfo = JSON.parse(that.userInfo);
            that.access_token = window.localStorage.getItem('access_token');
            that.search = window.localStorage.getItem('historySearch');
            if(that.userInfo == null){//用户未登陆
                that.userStatus = 0;
                that.userId = 0;
            }else{
                that.userId = that.userInfo.uid;
            }
            that.handSearch();

            // that.isFirstEnter=true;
            // 只有第一次进入或者刷新页面后才会执行此钩子函数
            // 使用keep-alive后（2+次）进入不会再执行此钩子函数
        },
        methods: {
            //点击取消
            
            handSearchbtn() {
                if(this.search_sousuo_btn == '取消') {
                    // this.isShow = false;
                    this.search = '';
                    this.$router.push({path: '/indexSearchresult'}); 
                    window.localStorage.removeItem('historySearch');
                }else if(this.search_sousuo_btn == '搜索') {
                    this.handClick(this.navind);
                }
            },
            // 点击搜索
            handSearch() {
                //请求接口
                this.$fetch(this.$path + '/index.php/getSearch', {type:1,access_token:this.access_token,name:this.search}).then((response) => {
                    console.log('产品列表', response);
                    let abc = '';
                    let ab = window.localStorage.getItem('historySearchList');
                    if(ab == null){
                        abc = this.search;
                        window.localStorage.setItem('historySearchList', abc);
                    }else{
                        console.log(555);
                        let arr = ab.split(',');
                        let aaaa = arr.indexOf(this.search); 
                        if(aaaa == -1){
                            
                            if(ab == null){
                                abc = this.search;
                            }else{
                                abc = ab +','+ this.search;
                            }
                            window.localStorage.setItem('historySearchList', abc);
                        }
                    }
                    
                   
                    
                    if(response.code == 200) {
                        this.isShow = true;
                        // this.headisShow = true;
                        // this.historyShow = false;
                        this.resultShow = false;
                        response.data.forEach((element,index) => {
                            this.CompanyList.splice(0,0,{id:element.cid,name:element.c_name,desc:element.c_brief,aa:0});
                        });
                    }else{
                        // this.headisShow = true;
                        // this.isShow = false;
                        this.CompanyList = [];
                        this.resultShow = true;
                        this.resultShow = response.msg;
                        // this.historyShow = false;
                    }
                })
            },
            // 搜索结果
            handClick(i) {
                if(i == 1) {
                    this.btnShow = true;
                }
                this.CompanyList = [];
                //请求接口
                this.$fetch(this.$path + '/index.php/getSearch', {type:i+1,access_token:this.access_token,name:this.search,userId:this.userId}).then((response) => {
                    console.log('产品列表', response);
                    if(response.code == 200) {
                        response.data.forEach((element,index) => {
                            switch(i){
                                case 0 ://圈子
                                    this.CompanyList.splice(0,0,{id:element.cid,name:element.c_name,desc:element.c_brief,aa:0,img:element.c_logo});
                                break;
                                case 1 ://企业
                                    this.CompanyList.splice(0,0,{id:element.id,name:element.name,desc:element.description,aa:1,showStatus:element.showStatus,img:element.img});
                                break;
                                case 2 ://新闻
                                    this.CompanyList.splice(0,0,{id:element.IDNews,name:element.Title,desc:element.summary,aa:2,img:element.img});
                                break;
                                case 3 ://产品
                                    this.CompanyList.splice(0,0,{id:element.IDProduct,name:element.chrName,desc:element.summary,aa:3,img:element.smallImg});
                                break;
                                case 4 ://活动
                                    this.CompanyList.splice(0,0,{id:element.id,name:element.title,desc:element.content,aa:4,img:element.img});
                                break;
                            }
                            
                        });
                    }else{
                        this.CompanyList = [];
                        this.resultShow = true;
                        // this.searchData = response.msg;
                    }
                })
                // console.log('点击的动作',i);
                this.navind = i;
            },
            // 删除输入内容
            clearClick() {
                this.search = '';
                this.clearShow = false;
                this.$router.push({path: '/indexSearchresult'}); 
            },

            //点击跳转
            indexJump(id,type){
                console.log(id);
                 switch(type){
                    case 0 ://圈子
                        this.$router.push({
                            path: 'userCenter/circleindex',
                            query: {
                            paicheNo: id
                            }
                        });
                    break;
                    case 1 ://企业
                        if(this.$system != 'ios'){
                            this.$router.push({
                                path: 'userCenter/companyIndex',
                                query: {
                                    cp_id: id
                                }
                            }); 
                        }else{
                            window.location.href = '/userCenter/companyIndex?cp_id=' + id;
                        } 
                        
                    break;
                    case 2 ://新闻
                        this.$router.push({
                            path: 'newsDetail',
                            query: {
                            id: id
                            }
                        });
                    break;
                    case 3 ://产品
                        this.$router.push({
                            path: 'productDetail',
                            query: {
                            paicheNo: id
                            }
                        });
                    break;
                    case 4 ://活动
                        this.$router.push({
                            path: 'activityDetail',
                            query: {
                            id: id
                            }
                        });
                    break;
                }
                
            },
        },
        watch: {
            search(value) {
                if(value != '') {
                    this.search_sousuo_btn = '搜索';
                    this.clearShow = true;          //清除输入内容
                }else {
                    this.search_sousuo_btn = '取消';
                    this.clearShow = false;
                }
            }
        },
        components: {
            // historySearch
        },
        computed: {
            //过滤方法
            // items: function() {
            //     var _search = this.search;
                
            //     if (_search) {
            //         //不区分大小写处理
            //         var reg = new RegExp(_search, 'ig')
            //         //es6 filter过滤匹配，有则返回当前，无则返回所有
            //         // 输入关键字后“取消”变“搜索”
            //         return this.items.CompanyList.filter(function(e) {
            //             //匹配所有字段
            //             return Object.keys(e).some(function(key) {
            //                 return e[key].match(reg);
            //             })
            //             //匹配某个字段
            //              return e.name.match(reg);
            //         })
            //     };
            //     this.search_sousuo = '取消';   //输入框为空，按钮显示为“取消”
            //     if(_search == '') {
            //         this.isShow = false;  //搜索结果隐藏
            //         this.resultShow = false;   //搜索为空隐藏
            //         this.historyShow = true;   //历史搜索显示
            //     }
            //     // return this.CompanyList;
            // }
        },  
}
</script>

<style>
/* 头部搜索 */
.header_search_bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    height: .88rem;
    background-color: #fff;
}
/* 头部左边 */
.header_search_comback {
    height: 0.88rem;
    line-height: 0.88rem;
}
.header_search_comback .icon-back_icon {
    font-size: 0.48rem;
    color: #999 !important;
    text-align: left;
    line-height: 0.88rem;
    height: 0.88rem;
    padding-left: 0.1rem;
    box-sizing: border-box;
}
/* 头部中间 */
.header_search_center_search {
    width: 100%;
    font-size: .22rem;
    color: #999;
}
.header_search_center_search span {
    display: inline-block;
    width: 6.4rem;
    margin: 0 auto;
    margin-left: -0.58rem;
    margin-top: 0.17rem;
    height: 0.54rem;
    line-height: 0.54rem;
}
/* 搜索 */
.header_search_center_search span .icon-sousuo {
    position: relative;
    z-index: 10;
    text-align: left;
    margin: 0 0.1rem;
    font-size: 0.3rem !important;
    color: #999;
}
/* 删除 */
.header_search_center_search .icon-guanbi {
    position: relative;
    z-index: 10;
    text-align: right;
    margin: 0 0.3rem;
    font-size: 0.3rem;
    color: #999;
}
.header_search_center_search input {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 6.2rem;
    height: 0.54rem;
    background-color: #f5f5f5;
    border: none;
    border-radius: 4px;
    -webkit-box-shadow: none;
    box-shadow: none;
    top: 50%;
    margin-top: -0.27rem;
    left: 50%;
    margin-left: -3.5rem;
    padding: 0 0.1rem 0 0.5rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 0.54rem;
    font-size: 0.24rem;
    color: #333;
}
/* 头部右边 */
.header_search_right {
    height: 0.88rem;
    line-height: 0.88rem;
    font-size: 0.22rem;
    color: #999;
    margin-top: -0.72rem;
}
.header_search_right button {
    font-size: 0.28rem;
    color: #999;
    padding-right: 0.3rem;
    box-sizing: border-box;
}

/* 历史搜索 */
.history_search {
    padding: 0.2rem 0.3rem;
}
.history_search h3 {
    font-size: 0.34rem;
    color: #999;
    text-align: left;
}
.history_search ul {
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    margin-top: 0.2rem;
}
.history_search ul li {
    font-size: 0.22rem;
    color: #333;
    padding: 0 .3rem;
    float: left;
    margin-right: .1rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 0.1rem;
    border: 1px solid #333;
    border-radius: 4px;
    height: 0.56rem;
    line-height: 0.56rem;
    text-align: center;
}
/* 搜索结果 */
.search_results .association_lists_searchNav {
    text-align: left;
    height: 1.48rem;
    line-height: 1.48rem;
    border-bottom: 1px solid #d8d8d8;
}
.search_results ul {
    display: flex;
    justify-content: space-between;
    height: 0.88rem;
    line-height: 0.88rem;
    border-bottom: 1px solid #d8d8d8;
}
.search_results ul>li {
    flex: 1;
    text-align: center;
    font-size: 0.28rem;
    color: #333;
}
.search_results ul>li.active {
    border-bottom: 2px solid #e50838;
    color: #e50838;
    margin: -0.02rem;
}

</style>